<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//第一个练习
			/**
			 * 1、创建两个UL标签
			 * 2、给ul标签中添加三个新的li标签
			 * 3、在li标签中添加新的文本值  例如 苹果、香蕉、芒果
			 * 4、点击每个li标签，使其弹出该li标签中的水果名
			 * 
			 */
		
			window.onload=function(){
				//创建ul和li
				var ul1=document.createElement("ul");
				var li1=document.createElement("li")
				var li2=document.createElement("li")
				var li3=document.createElement("li")
				
				var ul2=document.createElement("ul");
				var li4=document.createElement("li")
				var li5=document.createElement("li")
				var li6=document.createElement("li")
				
				var text1=document.createTextNode("苹果");
				var text2=document.createTextNode("橘子");
				var text3=document.createTextNode("香蕉");
				var text4=document.createTextNode("狗");
				var text5=document.createTextNode("猫");
				var text6=document.createTextNode("猪");
				
				div1.appendChild(ul1);
				div1.appendChild(ul2);
				//把li添加进ul
				ul1.appendChild(li1);
				ul1.appendChild(li2);
				ul1.appendChild(li3);
				ul2.appendChild(li4);
				ul2.appendChild(li5);
				ul2.appendChild(li6);
				
				//把文本添加进li
				li1.appendChild(text1);
				li2.appendChild(text2);
				li3.appendChild(text3);
				
				li4.appendChild(text4);
				li5.appendChild(text5);
				li6.appendChild(text6);
				
			var test=document.getElementsByTagName("li");
			for (var i=0;i<test.length;i++) {
				test[i].onclick=function(){
					alert(this.firstChild.nodeValue);
				}
			}
				
			}
		
		</script>
	</head>
	<body>
	
		<div id="div1"></div>
	</body>
</html>
